<template>
  <view>
    <u-form ref="uForm">
      <u-form-item label="出租房间" label-width="80" required>
        <!-- <u-input border="bottom" type="select" :select-open="selectShow" v-model="roomLabelVo"
								placeholder="请选择出租房间" @click="selectShow = true"></u-input> -->
        <u-radio-group v-model="model.roomType" placement="row">
          <u-radio v-for="(item, index) in selectList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
        </u-radio-group>
      </u-form-item>

      <u-form-item label-width="80" label="房间号" required>
        <u-input border="bottom" placeholder="如 A01..." v-model="model.roomCode" type="text">
        </u-input>
      </u-form-item>
      <u-form-item label-width="80" label="房屋面积" required>
        <u-input border="bottom" placeholder="请输入房屋面积" v-model="model.roomArea" type="number">
        </u-input>
      </u-form-item>
      <u-form-item label-width="80" label="朝向">
        <u-radio-group v-model="model.direction" placement="row" wrap>
          <u-radio v-for="(item, index) in directionList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
        </u-radio-group>
      </u-form-item>
			<u-form-item label="装修" prop="decoration" label-width="80" >
			  <u-radio-group v-model="model.decoration" placement="row" wrap>
			    <u-radio v-for="(item, index) in decorationList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
			  </u-radio-group>
			</u-form-item>
      <u-form-item label-width="80" label="月租金" required>
        <u-input border="bottom" placeholder="请输入租金" v-model="model.price" type="number"></u-input>
      </u-form-item>
      <u-form-item label="房源图片" label-width="80" required>
        <u-upload :action="action" :fileList="fileList" @afterRead="afterRead" :previewFullImage="true" :max-size="10 * 1024 * 1024" @delete="deletePic" name="file" multiple :maxCount="6"></u-upload>
      </u-form-item>
      <u-form-item label-width="80" top="top" label="房源亮点" required>
        <u-checkbox-group v-model="model.params" placement="column">
          <u-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name"> </u-checkbox>
        </u-checkbox-group>
      </u-form-item>
      <u-form-item label-width="80" label-position="top" label="房源描述">
        <!-- <u-input type="textarea" border="bottom" placeholder="请填写房屋描述" v-model="model.introduce" /> -->
        <u-textarea v-model="model.introduce" placeholder="请填写房屋描述"></u-textarea>
      </u-form-item>
      <u-form-item label="小区名称" prop="villageName" label-width="90" left-icon="map" :leftIconStyle="{color:'#d5d5d5'}">
        <uni-data-select v-model="model.villageName" placeholder="请选择小区(必选)" :localdata="villageList">
        </uni-data-select>
      </u-form-item>
      <u-form-item label="房型" prop="villagetype" label-width="90" left-icon="map" :leftIconStyle="{color:'#d5d5d5'}">
				<uni-data-select v-model="model.villagetype" placeholder="请选择小区(必选)" :localdata="villagetypeList">
				</uni-data-select>
			</u-form-item>
      <u-form-item label="房东姓名" prop="ownerName" label-width="90" left-icon="account" :leftIconStyle="{color:'#d5d5d5'}">
        <u-input border="bottom" placeholder="请输入房东姓名(必填)" v-model="model.ownerName" type="text"></u-input>
      </u-form-item>
      <u-form-item label="房东电话" prop="owerPhone" label-width="90" left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
        <u-input border="bottom" placeholder="请输入房东电话(必填)" v-model="model.owerPhone" type="number" maxlength="11"></u-input>
      </u-form-item>
      
    </u-form>
    <u-button type="primary" @click="submit">提交</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      model: {
        type: '合租',
				roomType: '主卧',
        params: ['独立阳台', '地铁近', '学校近'],
				direction: '南北',
				//装修
				decoration: '精装',
        introduce: '位于浦东区张江板块的中部偏西区域，小区于2006年峻工，物业地址是：晨晖路825弄。是由上海张江微电子港有限公司开发建设，小区总建筑面积约160000㎡，容积率约1.4，约有52栋商品房住宅，是由小高层和高层组成，小区内户型有2-5居室，户型面积约74㎡-254㎡，户型方正，适合刚需和改善型人群; 小区绿化率约40%，环境较好。小区是对口的学校依次是：张江集团中学和张江高科实验小学（藿香路校区）和经典幼儿园。',
        ownerName: '李四',
        owerPhone: '133345678910',
        villageName: '盛世豪庭',
        villagetype: '复式户型',
        agentName: '欧阳修',
        agentPhone: "12345678910",
        villagegreen: "78",
        villageyear: "2014-07-08",
        agentAvatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
        villageintroduce:`位于浦东区张江板块的中部偏西区域，小区于2006年峻工，物业地址是：晨晖路825弄。是由上海张江微电子港有限公司开发建设，小区总建筑面积约160000㎡，容积率约1.4，约有52栋商品房住宅，是由小高层和高层组成，小区内户型有2-5居室，户型面积约74㎡-254㎡，户型方正，适合刚需和改善型人群; 小区绿化率约40%，环境较好。小区是对口的学校依次是：张江集团中学和张江高科实验小学（藿香路校区）和经典幼儿园。`,
      },
      fileList:[],
      villageList: [
        { value: '盛世豪庭', text: '盛世豪庭' },
        { value: '嘉林景苑', text: '嘉林景苑' },
        { value: '锦绣雷庭', text: '锦绣雷庭' },
        { value: '紫金苑', text: '中央公馆' },
        { value: '云海山庄', text: '云海山庄' },
        { value: '洲际观天下', text: '洲际观天下' }
      ],
      villagetypeList: [
        { value: '复式户型', text: '复式户型' },
        { value: '电梯平层Ⅰ（平层两房+三房）', text: '电梯平层Ⅰ（平层两房+三房）' },
        { value: '电梯平层Ⅱ（小三房）', text: '电梯平层Ⅱ（小三房）' },
        { value: '电梯平层Ⅲ（大三房）', text: '电梯平层Ⅲ（大三房）' },
        { value: '电梯顶楼复式', text: '电梯顶楼复式' }
      ],
      selectList: [
        {
          value: '1',
          label: '主卧'
        },
        {
          value: '2',
          label: '次卧'
        }
      ],
			decorationList: [
			  {
			    label: '简装',
			    value: '简装'
			  },
			  {
			    label: '中装',
			    value: '中装'
			  },
			  {
			    label: '精装',
			    value: '精装'
			  },
			  {
			    label: '豪装',
			    value: '豪装'
			  }
			],
      directionList: [
        {
          value: '东西',
          label: '东西'
        },
        {
          value: '南北',
          label: '南北'
        }
      ],
      checkboxList: [
        {
          name: '看房方便'
        },
        {
          name: '押一付一'
        },
        {
          name: '独立阳台'
        },
        {
          name: '智能锁'
        },
        {
          name: '地铁近'
        },
        {
          name: '学校近'
        },
        {
          name: '免物业费'
        },
        {
          name: '民用水电'
        }
      ],
      actionSheetList: [
        {
          text: '电梯房'
        },
        {
          text: '楼梯房'
        }
      ]
    }
  },
  methods: {
    submit() {
      this.model.imageList = this.fileList.map((item) => {
        return item.url
      })
      this.model.faceUrl = this.fileList[0].url
      this.$emit('submit', this.model)
    },
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1)
    },
    // 新增图片
    afterRead(event) {
      // console.log(event)
      let fileList = event.file
      uni.uploadFile({
        url: 'http://127.0.0.1:80/upload', // 仅为示例，非真实的接口地址
        filePath: fileList[0].url,
        name: 'file',
        formData: {
          folderName: 'subhouse'
        },
        success: ({ data }) => {
          let back = JSON.parse(data)
          let url = 'http://127.0.0.1:80' + back.data.filePath
          console.log(url)
          this.fileList.push({ url })
        }
      })
    }
  }
}
</script>

<style>
page {
  background-color: #ffffff;
  height: 200vh;
}
</style>
<style scoped lang="scss">
.slot-btn {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}
</style>
